<!--页面组件-->
<template>
  <div>
    <!-- <div class="bgcolor"> -->
      <div style class="legendBox">
                <!--图例@start-->
                <div class="legendCon">
                    <ul>
                        <li>
                            <em style="background: #67B9A5;"></em>
                            <span>成功</span>
                        </li>
                        <li>
                            <em style="background: #C11113;"></em>
                            <span>失败</span>
                        </li>
                        <!-- <li>
                            <em style="background: #B0B4B9;"></em>
                            <span>待执行</span>
                         </li> -->
                        <li>
                            <em style="background: #4D7BD7;"></em>
                            <span>执行中</span>
                        </li>
                    </ul>
                </div>
                <!--图例@end-->
            </div>
    <!-- </div> -->
</div>
</template>


<!--js代码-->
<script>
export default {
name: 'Dashboard',
props: { },
data() {
return { 

}
},
created() { 

},
mounted() {

},
methods: { 

},
}
</script>


<!--css样式-->
<style scoped>
.bgcolor{
    background-color: rgba(0,0,0,0.4);
    height: 200px;
    width: 200px;
}
/*图例@start*/
.legendBox {
position: absolute;
/* left:30px; */
/* top:121px */
}
.legendBox .legendCon {
position: absolute;
width: 118px;
background: rgba(255, 255, 255, 0.6);
z-index: 100;
border-radius: 3px;
border: none;
}
.legendBox .legendCon ul {
padding-left: 0;
margin-top: 5px;
margin-bottom: 5px;
}

.legendBox .legendCon ul li {
list-style-type: none;
line-height: 24px;
color: rgba(0, 0, 0, 0.8);
padding-left: 15px;
font-size: 12px;
}
.legendBox  .legendCon ul li em {
width: 10px;
height: 10px;
line-height: 10px;
margin-right: 15px;
/* border-radius: 5px; */
}

.legendBox  .legendCon ul li em,
.legendBox  .legendCon ul li span {
display: inline-block;
vertical-align: middle;
font-size: 14px;
}
/*图例@end*/
</style>